<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <!-- 数组遍历的方式 -->
  <script>
    // for 循环遍历数组
    var arr = ["广东省", "云南省", "浙江", "江苏", "福建"];
    for (var i = 0; i < arr.length; i++) {
      document.write(arr[i] + "<br/>")
    }
    //  es6  forEach 遍历数组
    arr.forEach(function (ele, index) {
      // ele--数组没一项  
      //index--代表数组下标
      document.write(index + "-----" + ele + "<br/>")
    })
    // for in 循环遍历数组
    for (var x in arr) {
      // x---代表下标index
      document.write(arr[x] + "<br/>")
    }
    //es6新增  for of
    for (var y of arr) {
      // y 代表数组的每一项
      document.write(y + "<br/>")
    }
    // 二维数组的遍历
    document.write("<hr/>")
    var city = [
      ["深圳", "广州", "中山", "东莞", "珠海"],
      ["郑州", "南阳", "信阳", "洛阳", "鹤壁"],
      ["石家庄", "邯郸", "廊坊", "唐山", "秦皇岛"]
    ]
    for (var i = 0; i < city.length; i++) {
      for (var j = 0; j < city[i].length; j++) {
        document.write(city[i][j] + "<br/>")
      }
    }
    // 数组配合对象使用
    var product = [
      { name: "羽绒服", price: "888", color: "红色" },
      { name: "裤子", price: "111", color: "蓝色" },
      { name: "帽子", price: "222", color: "绿色" }
    ]
  </script>
</body>

</html>